<template>
    <div>
        <top-bar></top-bar>
        <left-bar :datas='data'></left-bar>
        <div class="department">
            <div class="system">
                <home-bar :currentPage='currentPage'></home-bar>
                <div class="system-main">
                    <div class="main-position">
                        首页 > 财务管理 > 收入统计
                    </div>
                    <div class="main-height"></div>
                    <div class="main-mains">
                        <div class="main-top-nav">
                            <ul>
                                <router-link to="/sale" @click.native="addPath('/sale','财务管理')">
                                    <li>销售统计</li>
                                </router-link>
                                <router-link to="/income" @click.native="addPath('/income','财务管理')">
                                    <li >收入统计</li>
                                </router-link>
                                <router-link to="/expenditure" @click.native="addPath('/expenditure','财务管理')">
                                    <li class="active">支出统计</li>
                                </router-link>
                                <router-link to="/integral" @click.native="addPath('/integral','财务管理')">
                                    <li>积分统计</li>
                                </router-link>
                                <router-link to="/redpacket" @click.native="addPath('/redpacket','财务管理')">
                                    <li>红包统计</li>
                                </router-link>
                            </ul>
                        </div>
                        <div class="finance-main-mains">
                            <div class="finance-main-mains-top clear">
                                <div class="fl">
                                    <el-date-picker v-model="date1" type="month" placeholder="选择月">
                                    </el-date-picker>
                                </div>
                                <div class="fl finance-main-top-search">
                                    查询
                                </div>
                            </div>
                            <div class="finance-main-mains-mi clear">
                                <div class="fl finance-main-mains-mi-l ">
                                    <div class="finance-l fl">
                                        <div id='expenditure' style="width:80%;height:172px;"></div>
                                        <div class="finance-txts">
                                            <p>￥3000</p>
                                            <p>本月总支出</p>
                                        </div>
                                    </div>
                                    <div class="finance-r finance-rs  fl">
                                       <p><span></span>转账</p>
                                       <p><span></span>￥20000.00</p>
                                       <p><span></span>提现</p>
                                       <p><span></span>￥20000.00</p>
                                       <p><span></span>信息费支出</p>
                                       <p><span></span>￥20000.00</p>
                                       <p><span></span>手续费</p>
                                       <p><span></span>￥20000.00</p>
                                    </div>
                                </div>
                                <div class="finance-main-mains-mi-r fl" id="finances">
                                </div>
                            </div>
                            <div class="finance-main-mis">
                                <div>批量导出</div>
                            </div>
                            <div class="finance-main-table">
                                <table>
                                    <tr>
                                        <th>序号</th>
                                        <th>时间</th>
                                        <th>订单号</th>
                                        <th>支出类型</th>
                                        <th>金额</th>
                                        <th>手续费</th>
                                    </tr>
                                    <tr v-for="(item,index) in 10" :key="index" :class="{active:index%2==1}">
                                        <td>{{index}}</td>
                                        <td>2018/05/03 11:18</td>
                                        <td>一</td>
                                        <td>转账</td>
                                        <td>￥20000</td>
                                        <td>￥2000</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import topBar from "../public/top";
import leftBar from "../public/left";
import homeBar from "../public/homebar";
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default {
  components: {
    leftBar,
    topBar,
    homeBar
  },
  data() {
    return {
      data: "/finance",
      currentPage: {
        path: "/expenditure",
        name: "财务管理"
      },
      date1: ""
    };
  },
  activated() {
    this.finances();
    this.expenditure();
  },
  methods: {
    addPath(n1, n2) {
      //点击切换home-bar
      var obj = {};
      obj.n1 = n1;
      obj.n2 = n2;
      this.$store.commit("addPath", obj);
    },
    finances() {
      //当月财务总体变化
      let myCharts = echarts.init(document.getElementById("finances"));
      let option = {
        tooltip: {
          trigger: "axis"
        },
        title: {
          text: "本月每日收入情况"
        },
        color: ["#0db4b9"],
        tooltip: {
          show: true,
          trigger: "axis",
          backgroundColor: "#16c4c9"
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: [
              "1:00",
              "2:00",
              "3:00",
              "4:00",
              "5:00",
              "6:00",
              "7:00",
              "8:00",
              "9:00",
              "10:00",
              "11:00",
              "12:00",
              "13:00",
              "14:00",
              "15:00",
              "16:00",
              "17:00",
              "18:00",
              "19:00",
              "20:00",
              "21:00",
              "22:00",
              "23:00",
              "24:00"
            ]
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "￥{value}"
            }
          }
        ],
        series: [
          {
            name: "昨天交易统计",
            type: "bar",
            barWidth: 10,
            data: [
              2.0,
              4.9,
              7.0,
              23.2,
              25.6,
              76.7,
              135.6,
              162.2,
              32.6,
              20.0,
              6.4,
              3.3,
              2.0,
              4.9,
              7.0,
              23.2,
              25.6,
              76.7,
              135.6,
              162.2,
              32.6,
              20.0,
              6.4,
              3.3
            ]
          }
        ]
      };
      myCharts.setOption(option, true);
      window.addEventListener("resize", function() {
      myCharts.resize();
      });
    },
    expenditure() {
      let myCharts = echarts.init(document.getElementById("expenditure"));
      let options = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
          {
            name: "本月总支出",
            type: "pie",
            hoverAnimation: false,
            radius: ["80%", "100%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: 30,
                name: "转账"
              },
              {
                value: 162,
                name: "提现"
              },
              {
                value: 30,
                name: "信息费支出"
              },
              {
                value: 162,
                name: "手续费"
              }
            ]
          }
        ],
        color: ["#62a4e1", "#0db4b9", "#ffbb43", "#e162a1"]
      };
      myCharts.setOption(options, true);
      window.addEventListener("resize", function() {
      myCharts.resize();
      });
    }
  }
};
</script>

<style lang="less">
@import "finance.less";
</style>

